<template>
  <view class="container">
    <view class="map-container">
      <map style="width: 100%; height: 300px;" :latitude="latitude"
           :longitude="longitude" :polyline="polyline" :markers='covers'>
      </map>
    </view>
    <view class="order-info">
      <view class="line"></view>
      <view class="info-list">
        <view class="item" :key="index" v-for="(item, index) in infoList">
          <view class="dot"></view>
          <view class="status-info">


            <view class="status" v-if="item.status !== 3">
              {{ getStatusText(item.status) }} &nbsp;<span>{{ item.changeTime }}</span>
            </view>
            <view class="status" v-else-if="item.status === 3">
              {{ getStatusText(item.status) }} &nbsp;<span>{{ item.changeTime }}</span>
            </view>
            <view class="status" v-else>
              &nbsp;<span>{{ item.changeTime }}</span>
            </view>


            <view class="name">

              <view v-if="item.status === 0">商品已下单</view>
              <view v-else-if="item.status === 1">包裹正在等待揽件</view>
              <view v-else-if="item.status === 2">
                【{{ item.currentAddressCenter.name }}】&nbsp;{{ item.currentAddress }}&nbsp;已揽收
              </view>
              <view v-if="item.status === 3">
                【{{ item.currentAddressCenter.region.name }}】&nbsp;已离开&nbsp;{{ item.currentAddress }}&nbsp;;
                发往&nbsp;{{ item.toAddressCenter.name }}
              </view>
              <view v-if="item.status === 4">
                【{{ item.currentAddressCenter.name }}】&nbsp;已到达&nbsp;{{ item.currentAddress }}
              </view>


              <view v-else-if="item.status === 5">
                【{{ item.currentAddressCenter.name }}】&nbsp;&nbsp;{{ item.currentAddress }}&nbsp;;
                快递员&nbsp;{{ item.postman.name }}&nbsp;<span class="phone">{{ item.postman.phone }}</span>正在为你派件
              </view>
              <view v-else-if="item.status === 6">
                你的快递已送至{{ logistics.address }}，请前往取件，如有问题请联系<span
                  class="phone">{{ item.postman.phone }}</span>
              </view>
              <view v-else-if="item.status === 7">你已在{{
                  logistics.address
                }}完成取件，感谢你使用{{ companyName }}物流，期待再次为你服务
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

import request from "../../utils/request";

export default {
  data() {
    return {
      companyName: "",
      latitude: '',
      longitude: '',
      polyline: [{
        points: [],
        color: "#6e6ea4",
        arrowLine: true,
        dottedLine: true
      }],
      covers: [],
      infoList: [],
      postman: {},
      logistics: {}
    };
  },
  created() {
    this.loadLogInfo()
  },
  onLoad(options) {
  		// console.info("sdaw",options.id)
		this.loadLogInfo(options.id)
		this.loadTrack(options.id)
  },
  methods: {
    getCurrentLocation() {
      // implement your logic to get current location
    },
    getStatusText(status) {
      // implement your logic to get status text based on status code
    },

    //加载物流信息
    loadLogInfo(id) {
      request({
        url: `/loginfo/loginfo/orderId/${id}`,//把123换成其他页面传过来的订单id既可
        method: 'get'
      }).then((data) => {
        let allData = data.data
        //收货地点
        this.logistics.address = allData.deliveryAddress

        request({
          url: `/loginfo/track/orderId/${id}`,//把123换成其他页面传过来的订单id既可
          method: 'get'
        }).then((track) => {
          //定位点
          this.latitude = track.data[track.data.length - 1].locationLatitude
          this.longitude = track.data[track.data.length - 1].locationLongitude

          request({
            url: `/loginfo/person/` + allData.personId,//personId快递小哥的id既可
            method: 'get'
          }).then((person) => {
            //添加地图发货点
            this.polyline[0].points.push({
              latitude: allData.shippingLatitude,
              longitude: allData.shippingLongitude
            })
            track.data.forEach((e) => {
              let newData = {
                status: e.status,
                changeTime: e.changeTime,
                currentAddressCenter: {
                  region: {
                    name: "分拨中心"
                  },
                  name: "收件中心"
                },
                currentAddress: e.locationAddress,
                toAddressCenter: {
                  name: e.nextAddress
                },
                postman: {
                  name: '',
                  phone: ''
                }
              }
              //货物当前位置图标
              this.covers.push({
                latitude: track.data[track.data.length - 1].locationLatitude,
                longitude: track.data[track.data.length - 1].locationLongitude,
                iconPath: '/static/location.png'
              })

              this.polyline[0].points.push({
                latitude: e.locationLatitude,
                longitude: e.locationLongitude
              })

              if (e.status >= 5) {
                newData.postman.name = person.data.name
                newData.postman.phone = person.data.phone
              }
              this.infoList.push(newData)

            })

            //判断物流状态是否为已到达，没到达用绿色小图标记倒数第二个地址，到达就删除再添加标记到目的地
            if (track.data[track.data.length - 1].status >= 4) {
              this.covers.splice(0, 1)
              this.covers.push({
                latitude: track.data[track.data.length - 1].locationLatitude,
                longitude: track.data[track.data.length - 1].locationLongitude,
                iconPath: '/static/location.png'
              })
            }

            //添加地图收货点
            this.polyline[0].points.push({
              latitude: allData.deliveryLatitude,
              longitude: allData.deliveryLongitude
            })
            console.info(this.infoList)
          })
        })

        this.loadCompany(allData.companyId)
      }).catch((e) => {
        console.info(e)
      })

      console.info(this.polyline[0].points)
    },

    //加载物流轨迹信息
    loadTrack(id) {
      request({
        url: `/loginfo/track/${id}`,
        method: 'get'
      }).then((resp) => {
        let allData = resp.data

        allData.forEach((e) => {
          console.info(e)
        })

      }).catch((e) => {
        console.info(e)
      })
    },

    //加载物流公司信息
    loadCompany(id) {
      request({
        url: '/loginfo/company/' + id,
        method: 'get'
      }).then((data) => {
        console.info(data)
        this.companyName = data.data.companyName
      }).catch((e) => {
        console.info(e)
      })
    },
    //加载快递人员信息
    loadPerson() {
      request({
        url: `/loginfo/person/8`,
        method: 'get'
      }).then((data) => {
        return data
      }).catch((e) => {
        console.info(e)
      })
    },

    //加载物流收货地址以及收货人信息
    loadAddress() {
      request({
        url: '/loginfo/address/9',
        method: 'get'
      }).then((data) => {
        return data
      }).catch((e) => {
        console.info(e)
      })
    },
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.map-container {
  width: 100%;
  height: 40vh;
}

.order-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.line {
  width: 2px;
  height: 100%;
  background-color: #000;
}

.info-list {
  margin-top: 20px;
}

.item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #000;
  margin-right: 10px;
}

.status-info {
  display: flex;
  flex-direction: column;
}

.status {
  font-weight: bold;
}

.name {
  margin-top: 5px;
}

.phone {
  font-weight: bold;
}
</style>
